<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">角色分组</div>
      <div class="extra fr">
        <el-button @click="back">返回</el-button>
      </div>
    </div>

    <div class="app-container margin-content padding-content">
      <div class="btn-wrapper">
        <el-button type="primary" icon="el-icon-edit" @click="addOrUpdateHandle()">新建分组</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteHandle()">删除</el-button>
      </div>
      <el-table
        :key='tableKey'
        :data="list"
        v-loading="listLoading"
        element-loading-text="正在加载..."
        @selection-change="handleSelectionChange"
        :height="scrollHeight"
        style="width: 100%">

        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="角色分组ID" property="id"></el-table-column>
        <el-table-column label="角色分组名称" property="name"></el-table-column>
        <el-table-column label="操作"  fixed="right">
          <template slot-scope="scope">
            <a @click="addOrUpdateHandle(scope.row.id)">编辑</a>
            <divider type="vertical"></divider>
            <a @click="deleteHandle(scope.row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container align-right" v-show="list.length > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh="_getRoleGroupList()"></add-or-update>
  </div>
</template>

<script>
  // api
  import { getRoleGroupList, delRoleGroup } from '@/api/roles'
  // components
  import addOrUpdate from './components/groups-add-or-update'
  import Divider from '@/components/Divider'

  export default {
    name: 'rolesGroups',
    data() {
      return {
        tableKey: 0,
        listLoading: false,
        scrollHeight: null,
        page: {
          pageNum: 1,
          pageSize: 20
        },
        total: 0,
        dataListSelections: [],
        addOrUpdateVisible: false,
        list: []
      }
    },
    created() {
      this._getRoleGroupList()
      this.tableResize()
    },
    methods: {
      tableResize(){
        const _height = 320
        this.scrollHeight = document.body.scrollHeight - _height
        window.onresize = () => {
          this.scrollHeight = document.body.scrollHeight - _height
        }
      },
      handleSelectionChange(val) {
        this.dataListSelections = val
      },
      _getRoleGroupList() {
        const params = Object.assign({}, this.page)
        getRoleGroupList(params).then((res) => {
          this.list = res.data.data.dataList
          this.total = res.data.data.total
        })
      },
      // 每页数
      handleSizeChange(val) {
        this.page.pageSize = val
        this._getRoleGroupList()
      },
      // 当前页
      handleCurrentChange(val) {
        this.page.pageNum = val
        this._getRoleGroupList()
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs['addOrUpdate'].init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        let ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        ids = ids.join(',')
        if (ids.length === 0) {
          this.$message({showClose: true, message: '请先选择一条', type: 'warning'})
        } else {
          this.$confirm(`确定对角色分组ID=[${ids}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delRoleGroup({ids: ids}).then(() => {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this._getRoleGroupList()
                }
              })
            })
          }).catch(() => {
          })
        }
      },
      back() {
        this.$parent.back()
      }
    },
    components: {
      Divider,
      addOrUpdate
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped="scope">
</style>
